<!-- App.vue -->
<template>
    <div class="a">
        <button @click="showPopup = true">点击打开窗口</button>
        <popup :visible="showPopup" @close="closePopup">
            <template v-slot:header>
                <h3>增加用户</h3>
            </template>
            <template v-slot:content>
                <form action="">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" v-model="name">
                    <br>
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" v-model="email">
                </form>
            </template>
            <template v-slot:footer>
                <button>提交</button>
            </template>
        </popup>
    </div>
</template>

<script>
import Popup from './Popup.vue';

export default {
    components: {
        Popup
    },
    data() {
        return {
            showPopup: false
        };
    },
    methods: {
        closePopup() {
            this.showPopup = false;
        }
    }
};
</script>

<style>
.a {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 60px;
}
</style>